<template>
	<div class="changeRole">
        <a-popover v-model:visible="visible"  trigger="click" placement="bottom" overlayClassName="choose-popver">
            <template #content>
                <div class="chooselist">
                    <div class="left">
                    <a-tooltip v-for="(item, index) in memberof" :key="item"  :title='item.organization_name + "-" + item.department_name + "-" + item.organizational_role_name'>
                        <a-button :type="btnIndexMemOf == index ? 'primary' : '' " class="meeBtn" @click="setOrgData(item, index)">{{ item.organization_name + "-" + item.department_name + "-" + item.organizational_role_name}}</a-button>
                    </a-tooltip>
                    </div>
                   <a-divider type="vertical" style="height: 165px; border-color: black" dashed/>
                
                    <div class="right">
                        <a-tooltip v-for="(item2, index) in roles" :key="item2" :title="item2.display_name">
                            <a-button class="meeBtn" :type="btnIndexRole == index ? 'primary' : '' " @click="setRoleData(item2, index)">{{ item2.display_name }}</a-button>
                        </a-tooltip>
                    </div>
                </div>
                <div class="querenBtn">
                    <a-button type="primary" @click="hide">确定</a-button>
                    
                </div>
                
            </template>
            
            <div class="changeArea" >
                <span class="changememberName">{{memberofName }}</span>
                <span class="changeRoleName">{{roleName }}</span>
            </div>
    </a-popover>
    </div>
    
</template>


<script setup lang="ts">
import { Http } from '@/http';
import { orgSelectProps } from './org-select';
import { useAppStoreWithOut } from '@/store/modules/app';
import { useAuthResourceStoreWithOut } from '@/store';
import { Ref } from 'vue';
import { getSessionStorage, IParam, setSessionStorage } from '@/core';
import { IEvent } from '@/core';
import { defineComponent, ref } from 'vue';
interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
let treeData: Ref<any[]> = ref([]);
const props = defineProps(orgSelectProps);
const selectTreeValue = ref('');
const copyFilterValue = ref('');
const { getOrgData, addOrgData } = useAppStoreWithOut();
const emit = defineEmits<EditorEmit>();
const visible = ref<boolean>(false);
const roles: Ref<any[]> = ref([]);    
let roleName: Ref<string> = ref(''); 
    
const memberof: Ref<any[]> = ref([]);
let memberofName: Ref<string> = ref('');

const activeOrgData: Ref<any> = ref({});

const btnIndexMemOf: Ref<number> = ref(0);
const btnIndexRole: Ref<number> = ref(0);           

    const hide = () => {
      localStorage.setItem('activeOrgData', JSON.stringify(activeOrgData.value))
      setSessionStorage("activeOrgData", activeOrgData.value);  
      visible.value = false;
      window.location.reload();
    };

    onMounted(() => {
        const localData = localStorage.getItem('activeOrgData');
        const appContext: IParam = App.getAppData().context;
        if (appContext) {
            const activeOrgData = getSessionStorage("activeOrgData");
            if (appContext.member_of && appContext.member_of.length > 0) {
                memberof.value = appContext.member_of;
                // 先判断localStorage是否有存储
                if(localData){
                    const localItem = JSON.parse(localData);
                    const defaultItem = appContext.member_of.find((item: IParam) => Object.is(item.organization_id, localItem.organization_id));
                    if (defaultItem) {
                        memberofName.value = defaultItem.organization_name + "-" + defaultItem.department_name + "-" + defaultItem.organizational_role_name
                        memberof.value.forEach((item: any, i: number) => {
                        
                            if(Object.is(item.organization_name + "-" + item.department_name + "-" + item.organizational_role_name, 
                                defaultItem.organization_name + "-" + defaultItem.department_name + "-" + defaultItem.organizational_role_name)){
                                btnIndexMemOf.value = i;
                                setOrgData(item, i);
                            }
                    
		                });
                    }
                } else if(activeOrgData && activeOrgData.organization_id){
                    const defaultItem = appContext.member_of.find((item: IParam) => Object.is(item.organization_id, activeOrgData.organization_id));
                    if (defaultItem) {
                        memberofName.value = defaultItem.organization_name + "-" + defaultItem.department_name + "-" + defaultItem.organizational_role_name
                        memberof.value.forEach((item: any, i: number) => {
                        
                            if(Object.is(item.organization_name + "-" + item.department_name + "-" + item.organizational_role_name, 
                                defaultItem.organization_name + "-" + defaultItem.department_name + "-" + defaultItem.organizational_role_name)){
                                btnIndexMemOf.value = i;
                                setOrgData(item, i);
                            }
                    
		                });
                    }
                } else {
                    setOrgData(appContext.member_of[0], 0);
                    memberofName.value = appContext.member_of[0].organization_name + "-" + appContext.member_of[0].department_name + "-" +appContext.member_of[0].organizational_role_name
                }
            }    

            if (appContext.roles && appContext.roles.length > 0) {
                roles.value = appContext.roles;
                if(localData){
                    const localItem = JSON.parse(localData);
                    const defaultItem = appContext.roles.find((item: IParam) => Object.is(item.system_id, localItem.system_id));
                    if (defaultItem) {
                        roleName.value = defaultItem.display_name;
                        roles.value.forEach((item: any, i: number) => {
                            if(Object.is(item.system_id, defaultItem.system_id)){
                                btnIndexRole.value = i;
                                setRoleData(item, i);
                            }
                        });
                    }     
                } else if(activeOrgData && activeOrgData.system_id){
                    const defaultItem = appContext.roles.find((item: IParam) => Object.is(item.system_id, activeOrgData.system_id));
                    if (defaultItem) {
                        roleName.value = defaultItem.display_name;
                        roles.value.forEach((item: any, i: number) => {
                            if(Object.is(item.system_id, defaultItem.system_id)){
                                btnIndexRole.value = i;
                                setRoleData(item, i);
                            }
                        });
                    }
                     
                }else {
                    setRoleData(appContext.roles[0], 0);
                    roleName.value = appContext.roles[0].display_name;
                } 
            }
            
        } 
});

const setOrgData =(item :any, index: number) =>{
    btnIndexMemOf.value = index;
    memberofName.value = item.organization_name + "-" + item.department_name + "-" + item.organizational_role_name;
    activeOrgData.value.organization_id = item.organization_id;
    activeOrgData.value.organization_name = item.organization_name;
    activeOrgData.value.department_id = item.department_id;
    activeOrgData.value.department_name = item.department_name;
    activeOrgData.value.organizational_role_id = item.organizational_role_id;
    activeOrgData.value.organizational_role_name = item.organizational_role_name;
}

const setRoleData =(item :any, index: number) =>{
    btnIndexRole.value = index;
    roleName.value = item.display_name;
    activeOrgData.value.deploy_system_id = item.deploy_system_id;
    activeOrgData.value.display_name = item.display_name;
    activeOrgData.value.system_id = item.system_id;
}


</script>
<style lang="less">
    .changeRole{
        cursor:pointer;
        margin-right: 100px;
        .changeArea{
            .changememberName{
                font-size: 16px;
                margin-right: 30px;
            }
            .changeRoleName{
                font-size: 16px;
                margin-right: 30px;
            }
        }
       
        
        
    }
    .choose-popver{
        
        .ant-popover-inner{
            .ant-popover-inner-content{
                width: 610px;
                height: 230px;
                .chooselist{
                    width: 100%;
                    height: 85%;
                    margin-left: 20px;
                    .left{
                        float: left;
                        width: 200px;
                        margin-right: 59px;
                        max-height: 165px;
                        overflow: scroll;
                        .meeBtn{
                            width:190px;
                            margin-bottom: 10px;
                            span{
                                max-width: 150px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                    .ant-divider-dashed {
                        border: 1px dashed black !important;
                    }
                    .right{
                        float: right;
                        width: 260px;
                        margin-left: 5px;
                        max-height: 165px;
                        overflow-y: scroll;
                        .meeBtn{
                            width:100px;
                            margin-bottom: 10px;
                            margin-left: 10px;
                            span{
                                max-width: 80px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                }
                .querenBtn{
                    text-align: center;
                    
                }
        }
            
            
        }
            
    }
</style>